<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<script src="./scripts/axios.js"></script>
		<script>
			// 1. 请求拦截器  =>  在发送 ajax 之前，将请求拦住，进行相关的配置
			//                  （在数据发送到服务器之前，半路拦截住，再次添加一些必要的属性）

			// 2. 响应拦截器  =>  数据从后台返回以后，统一对数据处理
			//                  （在数据渲染到页面之前，半路拦截住，将数据清洗格式化，页面使用哪些，就返回哪些）

			axios.defaults.baseURL = 'http://127.0.0.1:3000'
			// axios.defaults.headers['mytoken'] = '12345'

			// 添加请求拦截器
			axios.interceptors.request.use(
				function (config) {
					// 在发送请求之前做些什么
					// 参数 config 中包含了请求头、请求数据、请求方式等信息
					console.log(config)

					// 如果想设置请求头，可以直接通过 config 这个字段挂载
					config.headers.mytoken = 'abcde'
					// 这个 return config 只是一个固定写法，必不可少
					return config
				},
				function (error) {
					// 对请求错误做些什么
					return Promise.reject(error)
				}
			)

			// 添加响应拦截器
			axios.interceptors.response.use(
				(response) => {
					// 这个 response 是指后台返回的被 axios 包裹好以后的数据
					// 但是这个数量比较繁琐，有很多属性开发中不需要
					// 所以需要将 data 真正使用的数据从 response 中取出来
					console.log(response)

					data = response.data
					return data
				},
				(error) => {
					return Promise.reject(error)
				}
			)

			axios.get('/axios-json').then((data) => {
				console.log(data)
			})
		</script>
	</body>
</html>
